<template>
    <div class="init-tour-container">
        <div class="init-tour-wrap">
            <div class="title">初始化</div>
            <div class="content">
                <div class="setting-left">
                    <el-anchor
                        :container="initAnchorRef"
                        direction="vertical"
                        type="default"
                        :offset="30"
                        @click="handleClick"
                    >
                        <el-anchor-link href="#systemSet" title="系统设置"/>
                        <el-anchor-link href="#copyPlatform" title="拷贝平台"/>
                        <!--                        <el-anchor-link href="#shortcutKeys" title="快捷键"/>-->
                        <el-anchor-link href="#markdownTheme" title="文档主题"/>
                        <el-anchor-link href="#codeTheme" title="代码主题"/>
                    </el-anchor>
                </div>
                <div class="setting-right">
                    <div ref="initAnchorRef" style="height: 300px; overflow-y: auto">
                        <div id="systemSet">
                            <el-divider content-position="left">系统设置</el-divider>
                            <setting-item label="暗黑主题">
                                <el-switch v-model="isDark"></el-switch>
                            </setting-item>
                            <setting-item label="查看方式">
                                <el-select v-model="viewDevice" placeholder="请选择默认查看方式">
                                    <el-option label="手机端" value="phone"></el-option>
                                    <el-option label="web端" value="web"></el-option>
                                    <el-option label="暂时隐藏" value="none"></el-option>
                                </el-select>
                            </setting-item>
                            <setting-item label="关闭按钮">
                                <el-radio-group v-model="closeMethod">
                                    <el-radio value="close">关闭窗口</el-radio>
                                    <el-radio value="hide">收到托盘</el-radio>
                                </el-radio-group>
                            </setting-item>
                        </div>
                        <div id="copyPlatform">
                            <el-divider content-position="left">拷贝平台</el-divider>
                            <setting-item label="打开平台">
                                <el-switch v-model="openPlat" active-text="拷贝后打开平台"
                                           inactive-text="不打开平台"></el-switch>
                            </setting-item>
                            <setting-item label="拷贝平台">
                                <el-checkbox-group v-model="copyPlat">
                                    <el-checkbox value="wechat"><i class="iconfont icon-wechat"></i> 公众号
                                    </el-checkbox>
                                    <el-checkbox value="juejin"><i class="iconfont icon-juejin"></i> 掘金</el-checkbox>
                                    <el-checkbox value="zhihu"><i class="iconfont icon-zhihu"></i> 知乎</el-checkbox>
                                    <el-checkbox value="csdn"><i class="iconfont icon-csdn"></i> CSDN</el-checkbox>
                                </el-checkbox-group>
                            </setting-item>
                            <setting-item label="拷贝到掘金">
                                <el-switch active-text="直接拷贝" inactive-text="点击选择"
                                           v-model="copyJuejinWay"></el-switch>
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    placement="top"
                                >
                                    <template #content>
                                        '直接拷贝': 点击掘金平台时，直接将内容以默认主题复制到掘金平台<br/>
                                        '点击选择': 点击掘金平台时，先选择主题，再拷贝
                                    </template>
                                    <el-icon class="warning-icon">
                                        <WarningFilled/>
                                    </el-icon>
                                </el-tooltip>
                            </setting-item>
                        </div>
                        <!--                        <div id="shortcutKeys">-->
                        <!--                            <el-divider content-position="left">快捷键</el-divider>-->
                        <!--                            <setting-item label="新增">-->
                        <!--                                <el-input/>-->
                        <!--                            </setting-item>-->
                        <!--                            <setting-item label="撤销">-->
                        <!--                                <el-input/>-->
                        <!--                            </setting-item>-->
                        <!--                            <setting-item label="复制">-->
                        <!--                                <el-input/>-->
                        <!--                            </setting-item>-->
                        <!--                            <setting-item label="粘贴">-->
                        <!--                                <el-input/>-->
                        <!--                            </setting-item>-->
                        <!--                        </div>-->
                        <div id="markdownTheme">
                            <el-divider content-position="left">文档主题</el-divider>
                            <setting-item label="默认主题">
                                <el-select v-model="defaultMarkdownTheme" placeholder="请选择默认主题">
                                    <el-option v-for="item in markdownThemeConfig" :key="item.id" :label="item.name"
                                               :value="item.key"></el-option>
                                </el-select>
                            </setting-item>
                            <setting-item label="掘金默认主题">
                                <el-select v-model="defautJuejinTheme" placeholder="请选择默认主题">
                                    <el-option v-for="(item, index) in juejinMarkdownThemeConfig" :key="index"
                                               :label="item"
                                               :value="item"></el-option>
                                </el-select>
                            </setting-item>
                        </div>
                        <div id="codeTheme">
                            <el-divider content-position="left">代码主题</el-divider>
                            <setting-item label="默认主题">
                                <el-select v-model="defaultCodeTheme" placeholder="请选择默认主题">
                                    <el-option v-for="item in codeThemeConfig" :key="item.id" :label="item.name"
                                               :value="item.key"></el-option>
                                </el-select>
                            </setting-item>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer">
                <el-button type="primary" @click="handleSubmit">确定</el-button>
                <el-button @click="handleReset">重置</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref} from "vue";
import {WarningFilled} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
import {writeTextFile, BaseDirectory, mkdir, exists} from '@tauri-apps/plugin-fs';
import markdownThemeConfig from "../../config/markdownThemeConfig.js";
import juejinMarkdownThemeConfig from "../../config/juejinMarkdownThemeConfig.js";
import codeThemeConfig from "../../config/codeThemeConfig.js";
import SettingItem from "../../components/SettingItem.vue";
import {ElMessage} from "element-plus";

const router = useRouter();

const initAnchorRef = ref(null);

function handleClick(e) {
    e.preventDefault();
}

// 暗黑模式
const isDark = ref(false);
// 展示模式
const viewDevice = ref('phone');
// 关闭按钮
const closeMethod = ref('close');
// 点击拷贝后是否打开平台
const openPlat = ref(false);
// 拷贝平台
const copyPlat = ref(['wechat', 'juejin']);
const maximize = ref(false);
// 默认主题
const defaultMarkdownTheme = ref('oneSword');
// 默认掘金主题
const defautJuejinTheme = ref('smartblue');
// 默认代码主题
const defaultCodeTheme = ref('vs2015_mac');
// 拷贝到掘金平台方式
const copyJuejinWay = ref(false);

const handleSubmit = async () => {
    try {
        // 判断文件夹是否存在
        const isSettingDir = await exists('setting', {baseDir: BaseDirectory.AppLocalData});
        if (!isSettingDir) {
            // 创建文件夹
            await mkdir('setting', {baseDir: BaseDirectory.AppLocalData});
        }
        // 判断是否存在配置文件
        const isSettingFile = await exists('setting-conf.json', {baseDir: BaseDirectory.AppLocalData});
        if (!isSettingFile) {
            await writeTextFile('setting-conf.json', JSON.stringify({
                isDark: isDark.value,
                viewDevice: viewDevice.value,
                closeMethod: closeMethod.value,
                openPlat: openPlat.value,
                copyPlat: copyPlat.value,
                maximize: maximize.value,
                defaultMarkdownTheme: defaultMarkdownTheme.value,
                defautJuejinTheme: defautJuejinTheme.value,
                defaultCodeTheme: defaultCodeTheme.value,
            }), {baseDir: BaseDirectory.AppLocalData});
            await writeTextFile('file-conf.json', JSON.stringify({}), {baseDir: BaseDirectory.AppLocalData});
            localStorage.setItem('isStart', 'true');
            ElMessage.success('配置保存成功！')
        }
        await router.push({path: '/home'});
    }catch(e) {
        console.warn('保存报错: ', e);
    }
};

const handleReset = () => {
    isDark.value = false;
    viewDevice.value = 'phone';
    closeMethod.value = 'close';
    openPlat.value = false;
    copyPlat.value = ['wechat', 'juejin'];
    maximize.value = false;
    defaultMarkdownTheme.value = 'oneSword';
    defautJuejinTheme.value = 'smartblue';
    defaultCodeTheme.value = 'vs2015_mac';
    copyJuejinWay.value = false;
};
</script>

<style lang="less" scoped>
.init-tour-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .init-tour-wrap {
        width: 800px;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0 0 10px #aeaeae;
        border-radius: 6px;
    }
}

.title {
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding: 0 0 6px 16px;
    margin-bottom: 6px;
    position: relative;

    &::before {
        content: "";
        width: 4px;
        height: 20px;
        background-color: #1677ff;
        position: absolute;
        top: 2px;
        left: 0;
    }
}

.content {
    width: 100%;
    display: flex;

    .setting-left {
        width: 160px;
        border-right: 1px solid #ddd;
    }

    .setting-right {
        flex: 1;
        padding-left: 20px;
        box-sizing: border-box;
    }
}

.footer {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #ddd;
    padding-top: 6px;
    margin-top: 6px;
}
</style>